Widget 

Sebagian pada flutter adalah widget 

Widget itu ada didalam flutter 

Jadi widget ini adalah kumpulan blog kode 

Bentuknya class 

Class ini membangun aplikasi pada flutter 

Widget harus bisa membuat dan Menyusun widget2 dgn tepat 
Flutter ini menyediakan widget puluhhan ribu 

Widget ini membangun sebuah aplikasi tujuan kita 


MaterialApp adalah bawaan fluter untuk aplikasi 

Ini guna nya mengatur thema dan tampilan utama root dan lain2 
Pokoknya Ketika membuat aplikasi widget kita buat MaterialApp() 
CupertinoApp() untuk membuat style IOS sedangkan 
MaterialApp() untuk android 


Scaffold() mendesain struktur layout dasar 

Tanpa nya ini desain atau aplikasi hanya polos hitam 

Tapi dgn ini bisa mengatur App Bar, Floating Action, Button 
Drawer dll 


Nanti kita bermain dgn Scaffold() 
Ketika membangun satu halaman perlu Scaffold 
CupertinoPageScaffold untuk style mode ios 


Berikutnya jenis widget 

Ada 2 jenis 

Ada visible dan invisible 

Visible widget dpt dilihat oleh user adalah text(), Button dll 
Invisible widget yg tidak terlihat tugas mengatur layout control dll 
Dia focus membuat layout seperti row(),column(),container 


Berikutnya manipulasi sebuah widget 


Akan manipulasi widget text 

Sebelum nya sudah membuat aplikasi yg diajalankan menampilkan tulisan yg di 
tengah 

Karna di bungkus widget center 


Kali ini akan manipulasi text hello world tersebut 

Text ini disorot mempunyai property yg Namanya widget textstyle 

Maka tulis aja setelah “hello world”, style: TextStyle() ini banyak property nya kita 
hanya membhas nya yg sering dipakai yaitu color.blue, 

Text nya sudah berwarna biru 

Dan ada lagi 


Setelah color 

Decoration: textDecoration.Linethrough seperti di coret dan adalagi 
Overline garis pindah ke atas kalau underline kebawah 
Sebelumnya kita buat ukuran font 

fontSize: 30, 

diakhir 

fontStyle: membutuhkan Fontstyle.italic untuk garis miring 
fontWeight: fontWeight.bold, 

letterSpacing: mengatur antar huruf 10, 

wordSpacing: mengatur perkata 10, 

overflow: ini membutuhkan textOverflow.clip, maka tidak terjadi apa2 //komentar 
dulu 

sisa nya bisa di expore dahulu 

kemudian selain style ada 


sebelum hello world maxLines: mengatur baris nya berapa , 

misal 

kita buat banyak hello world nya ada 4 

maka menjadi 3 baris 

underline komentar dahulu 

dan leter dan wordspacing 

maka menjadi 2 baris 

lalu copy lagi hello world menjadi 4 baris 

kita ingin nya 2 baris kita bisa mengunakan maxLines 

maxLines: 2, maka maksimal menjadi 2 

untuk overlow.clif kita ubah ellipsis dia seharusnya masih ada 

overlow ini menanda kata ini terpotong maka ... kalau clip tidak terjadi apa2 
terus ada fade sepeti bawah nya bayangz terus ada visble dilihat visible sama 
ellicpsis sama 

Ketika kata2 terpotong menguna ellipsis 


Berikutnya materi container 


body: Center 
child: Text 


maxLines: 3, 
style: TextStyle 


fontSize: 30, 


color: MColors.blue, 


fontWeight: FontWeight.bold, 
fontStyle: FontStyle.italic, 


overflow: TextOverflow.ellipsis, 


Widget container 

Kita buat semula dahulu Kembali dari awal 

Center kita hapus juga untuk hapus satu widget 

Kita bisa klik kanan pada widget klik refactor lalu remove this widget maka jadi dia 
Kembali 

Atau widget center hilang 

Jadi text nya di atas 

Mau buat container 

Container itu memberikan sebuah style 

Container bisa kasih tinggi lebar warna bayangan dll 
Container bisa membuat variasi pada widget kita 

Untuk membuat container 

Text ini bungkus mengunakan widget container 

Untuk membuat container 

Klik kanan text nya pilih refactor pilih wrap with container 
Maka sudah muncul conatainer 

Container ini membutuh child 

Child ini disorot bebas kasih widget apapun disini 

Agar didalam sebuah text maka isi nya text 

Terus kita bisa kasihkan sebelum child 

Height: 100,//tinggi 

Agar terlihat kasih warna terlebih dahulu 

Color: colors.amber, 

Maka terlihat container sudah tinggi 100 sekarang kasih lebar 
Width: 100 

Ini widget property dasar 

Kita basih kasih alignment yaitu posisi anak widget 
Sebelumnya kiri 


Alignment: Alignment.center, maka ditengah 

Margin: Edgelnsets.all(10), //ini untuk memberikan jarak diluar 

Margin membutuhkan edgelnserts.all(maka semua ada jaraknya 

Ketika kasih only ini untuk memberikan spesfik kiri kana atas berapa 
Only(top: 20), maka atas aja 

Sysmetric untuk menentukan 2 sudah vertical(atas dan bawah) dan horizontal 
Sysmmetric(horiziontal: 20), 

Kemudian untuk padding 

Alignmen dan margin di komentar 

Padding: edgelnsert.all(5) maka didalam nya ada jarak 

Bisa kasih secara only(left: 20), 

Dan yg lebih penting ada 

Decoration: membuthkan BoxDecoration() manipulasi sebuah container 
Untuk manipulasi container didalamnya ad ajika disorot 

Didalamnya ada color image border dll 

Mau menulis decoration ini maka color harus dihapus 

Dan dipindahkan kedalam 

Jika taruh keluar maka eror masukan ke dalam boxdecorion 

Dan ada shape : untuk merubah bentuk nya 

Shape : BoxShape.circle maka berubah jadi bulat 

Maka ini shape di komentar 

Ada lagi 

borderRadius: dia membutuhkan borderRadius.circular(20), mengumpulkan sudut2 
dan ada juga ada 

gradient: untuk kasih warna gradiasi membutuhkan widget LinearGradient( colors : 
seperti list 

[Colors.amber,colors.blueAccent], 

Terus kasih begin: untuk menentukan arah gradien nya default nya center left 
Begin: Alignment.bottomCenter, 

End: Alignment.topCenter) di awal bawah dan diakhir atas tengah 

Misal 

Begin dan end menentukan arah nya 

Ini sudah gradient 

Kemudian ada 

boxShadow ini akan membahas stelah praktek projek design figma 

maka container ini dipakai 

boxshadow bahas secara detail setelah project 

kali membhas container yg perintng2 yg sering dipkai 


tingal box shadow yg belum dibahas 
kemudain belajar materi rows dan columns 


body: Container 


alignment: Alignment.center, 


decoration: BoxDecoration 


color: MColors.amber, 


borderRadius: BorderRadius.circular(10), 
gradient: LinearGradient( 


colors Mcolors.amber, MColors.blue], 
)), 
height: 100, 
gradient: LinearGradient( 
colors BColors.amber, MColors.blue], 
)), 
height: 100, 
width: 100, 
child: Text 
"Hello Andri", 


untuk mengatur sebuah widget 
layout kebawah atau kesamping 


Row & Column 


| 


column | 
nt 
| 
SSS 


Colum vertical 
Row secara horizontal 
Maka langsung coba 


Sudah mempunyai body yg ada container 

Body: container( 

Height : 50, 

Width: 50 

Color: colors.blueAccent, 

Sudah mempunyai kotak 

Ini menambahkan container lagi tidak bisa lagi jika ada 2 

Karna body bersifat satu saja bukan bersifat list 

Menampilkan 3 kotak kebawah 

Ada dibungkus dengan widget column 

Klik container klik kanan refactor lalu with column 

Lalu copy container nya tambah 2 maka sudah ada 3 kotak disini 
Disini adalah widget column maka kebawah 

Column ini mempunyai property children: artinya koloumn ini bisa widget 
Children ini sebuah list widget sebuah container 

Untuk column dari atas ke bawah 

Maka ukuran nya atas kebawah itu dia tanpa batas.sebatas layer 
Mau ke tengah bisa digunakan property 

mainAxisAligtment: mainAxisAlignment.center, 

maka ketengah 2 maka dari atas dan bawah 

disini main Axis alignment column 


Alignment 


Main Axis (Example for Row) Cross Axis (Example “»r Column) 


tretcl 


space-around space-around 


Sidenote: With stretch, the umn 
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space-between 


space-evenly 


space-between 


space-evenly 


row automatically increase in 
nuch as po ble. The size 
width / height) of the child 


widgets is not considered 


Inymort 


Main axis untuk column maka tanda kebawah kasih center maka tengah 
Berbeda dgn cross axis tengah nya center 

Kita focus ke column dahulu 

Kita kasih cross axis center maka dia ketengah secara horizontal 
Buka lagi 

MainAxisAlignment.start, //maka dia ada diatas 

Kemudian 

Kemudian kita pingin kotak ke tengah 

Jadi main axis arah sebenar nya atas kebawah 

Kalau crossAxisAlignmenet lawan dari kiri ke kanan 
crossAxisAlignment : crossAlignMent.center 

kalau stretch ini memanjang 

coba column nya refactor kasih container 

height: 200, 

color: colors.red, 

kenapa tadi cross tidak pengaruh karna sebuah column 

tidak mempunyai width atau lebar maka dia mengikuti content 
untuk width nya kasih 

double.infinity, //atau memenuh layar 

baru crossAxisAlignment bisa berada di tengah 

column itu berdafault tinggi tapi tidak mempunya lebar 

lebar nya mengisi content 

ini adalah column 


selanjutnya kita bikin rows 
maka kita comentar column nya 
lalu child : row() 
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membutuhkan juga 

children : 

kita kasih container lagi Satu 

maka ini sebaliknya dari row ke columns 

rows ini mempunya lebar tapi tidak punya tingi 

tinggi nya sesuai content nya 

jika container body 

width nya dihapus maka tidak pengaruh 

disini row nya kita kasih 

crossAxisAlignment : crossAxisAlignment.center 

maka tidak pengaruh karna tinggi nya hanya seconten merah 
di body container kasi 

height : double.infinity, tinggi memenuhi layar 

maka kotak sudah pindah 

row ini mainAxisAlignment: dari kiri ke kanan secara horizontal 
mainAxisAlignment.center 

kita kasih lagi di children nya jadi 2 

kita ubah mainAxisAlignment.spaceAround ini 

jarak awal sama akhir sama 

kemudian .spaceEvenly maka jarak nya sama 

.spaceBetween dia menghabiskan jarak diawal dan diakhir 
Coba kasih 3 maka ada di tengah 

Disini kita bisa mempelajari yg di power point 

Dan kita ubah crossAxisAlignment.stretch maka dia memanjang 
Disini maka height container children heigh maka tidak pengaruh 
Begittu juga crossAxisAlignment column 

Kita bisa kotakkatik disini bisa buat variasi sendiri. 


body: Container 
height: double.infinity, 
color: Wcolors.red, 


child: Row 
crossAxisAlignment: CrossAxisAlignment.stretch, 
mainAxisAlignment: MainAxisAlignment.spaceBetween, 
children 
Container 
height: 50, 
width: 50, 


color: MColors.orange, 


width: 50, 
color: MColors.orange, 


, 


Container 

height: 50, 

width: 50, 

color: MColors.orange, 
Container 

height: 50, 

width: 50, 

color: MColors.orange, 


